<template>
    <div>
        <el-form class="login1"
                 :ref="mainForm"
                 :model="user" :rules="rules">

            <el-form-item prop="username" class="login2">
                <el-input v-model.trim="user.username">
                    <template slot="prepend">账号:</template>
                </el-input>
            </el-form-item>


            <el-form-item prop="password" class="login2">
                <el-input v-model="user.password">
                    <template slot="prepend">密码:</template>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="loginByPwd()">登录
                </el-button>
                <el-button type="warning" icon="el-icon-remove"
                           @click="()=>$refs[mainForm].resetFields()">重置
                </el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script>
    import {mapMutations} from 'vuex';
    export default {
        data: function () {
            return {
                user: {

                    username: "张三",
                    password: "012345",
                },
                mainForm: 'loginForm',
                rules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                }
            }
        },
        computed: {},
        methods: {
            loginByPwd: function () {
                this.$notify({message: 'debug: '+JSON.stringify(
                                    this.user  )});

                let url = "/login";
                this.$refs[this.mainForm].validate((valid) => {
                    // this.$message.warning(JSON.stringify("hi" + this.user.username+this.user.password));
                    if (valid) {
                        this.$http({
                            method: 'post',
                            url: url,
                            data: "username="+this.user.username+"&password="+this.user.password,
                        }).then(res => {

                            this.$message.warning(res.data.username+" 登录成功");
                            this.setUser({
                                userCode:res.data.username,
                                nickname:res.data.nickname,
                            });
                            this.$router.push("/");


                        }).catch(res=> console.log(JSON.stringify(res)));
                    } else {
                        this.$message.warning(JSON.stringify("validate mistake"))
                    }
                });

            },
            ...mapMutations(['setUser'])
        },

        mounted: function () {

        },

        created: function () {

        },
        name: "login"
    }
</script>

<style scoped>
    .login1 {
        background-color: gray;
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;

    }
    .login2{
        margin: 5px auto;
        padding: 10px;
    }
</style>
